<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
        <title>游记明细</title>
    <meta name="site" content="http://www.wolfcode.com" />
    <meta name="description" content="骡窝游记,记录你每一个脚步" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/js/share/dist/css/share.min.css">
    <script src="/js/share/dist/js/social-share.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css" />
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/common.js"></script>

    <script>
        $(function(){
            var userId;
            var user = JSON.parse(sessionStorage.getItem("user"));
            userId = user.id;
            var travelCommentId;
            var authorId;
            //获取travelId
            var travelId = getParams().id;
            if (travelId) {
                $.get(baseUrl+"/travels/"+travelId,function(data){
                    console.log(data);
                    authorId=data.author.id;
                    $(".travels").renderValues(data,{
                        getHref:getHref
                    });

                    //获取该用户的粉丝数
                    var funsNum;
                    $.get(baseUrl+"/users/"+authorId+"/focusFuns",function(data){
                        funsNum = data.funsNum;
                        $("#funsNum").html(funsNum);
                    });
                    //0:没有关注;1:关注
                    var focu;//判断是否关注状态
                    //判断登录用户是否关注了作者用户
                    $.get(baseUrl+"/users/"+user.id+"/"+authorId,function(data){
                        focu=data;
                        if (focu == 1) {
                            $("#followBtn").html("取消关注")
                        }else if (focu == 0){
                            $("#followBtn").html("关注")
                        }
                    });
                    //关注点击变化,传输数据改变数据
                    $("#followBtn").click(function(){
                        if (focu == 1) {
                            focu = 0;
                            $(this).html("关注")
                            $("#funsNum").html(funsNum-1);
                            funsNum=funsNum-1;
                            //取消关注
                            $.ajax({
                                url:baseUrl+"/users/unFuns/"+user.id+"/"+authorId,
                                type:"delete"
                            });
                        }else if (focu == 0){
                            focu = 1;
                            $(this).html("取消关注")
                            $("#funsNum").html(funsNum+1);
                            funsNum=funsNum+1;
                            //添加关注
                            $.ajax({
                                url:baseUrl+"/users/funs/"+user.id+"/"+authorId,
                                type:"post"
                            });
                        }
                    });

                    //作者游记数量回显
                    $.get(baseUrl + "/users/"+authorId+"/travels", function (data) {
                        $("#travelsNum").html(data.total);
                    });
                });
            }

                //评论绑定点击事件,跳转至弹出框
                $("#commentBtn").click(function () {
                    //console.log(1);
                    $("#commentModal").modal("show");
                });

                //发送保存评论信息
                $(".btn-save").click(function () {
                    $("#editForm").ajaxSubmit({
                        url: baseUrl + "/travelComments" + "/addTravelComments",
                        data: {travelId: travelId},
                        type: "post",
                        success: function (data) {
                            location.href = "/travelContent.html?id=" + travelId;
                        }
                    });
                });

            var currentPage = 1;//定义当前页,默认为1
            var arr = [];//定义一个数组,用来装所有的分页数据
            var totalPage;//定义总页数
            var loading = false;//判断是否真正加载数据
            function query() {
                if (loading == true) {
                    return;
                }
                loading = true;
                $.get(baseUrl +"/travelComments"+"/selectTravelComments", {travelId:travelId,currentPage: currentPage}, function(data){
//                    console.log(data);
                    totalPage = data.pages;
                    //合并数据
                    $.merge(arr, data.list);
                    //改变数据格式
                    var json = {list: arr};
                    // 使用jrender 插件渲染数据 到页面
                    $("#comments").renderValues(json);
                    currentPage++;
                    loading = false;
                });
            };
            query();
            $(window).scroll(function () {
                if ($(window).height() + $(document).scrollTop()+1 >= $(document).height()) {
                    if (currentPage <= totalPage) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底啦',
                            autoClose: 2500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });


            //收藏操作:
            //查询收藏该游记的数量
            $.get(baseUrl+"/likesAndCollects"+"/travelCollectNum", {travelId: travelId}, function (data) {
                $('#travelCollect').html(data);
            })
            $('#collectBtn').click(function () {
                    if ($("#collectBtn").data('status') == 0) {
                        num = $("#travelCollect").html();
                        num++;
                        $("#travelCollect").html(num);
                        $('#collectBtn').removeClass("fa-star-o").addClass("fa-star");
                        $("#collectBtn").data('status', 1);
                        $.ajax({
                            url: baseUrl+"/likesAndCollects"+"/travelCollect",
                            type: "post",
                            data: {userId: user.id, travelId: travelId, status: 1},
                            success: function (data) {
                                if (data.success) {
                                    $(document).dialog({
                                        overlayClose: true,
                                        content: '收藏成功'
                                    });
                                }
                            }
                        })
                    } else if ($("#collectBtn").data('status') == 1) {
                        num = $("#travelCollect").html();
                        num--;
                        $("#travelCollect").html(num);
                        $('#collectBtn').removeClass("fa-star").addClass("fa-star-o");
                        $("#collectBtn").data('status', 0);
                        $.ajax({
                            url: baseUrl+"/likesAndCollects"+"/deleteTravelCollect/"+user.id+"/"+travelId,
                            type: 'DELETE',
                            success: function (data) {
                                $(document).dialog({
                                    overlayClose: true,
                                    content: '取消收藏成功'
                                });
                            }
                        })
                    }
            })
            //收藏回显操作=============================================================================
            if (user) {
                $.get(baseUrl+"/likesAndCollects/travelCollectStatus",{userId: user.id, travelId: travelId}, function (data) {
                    $('#collectBtn').data("status", data);
                    if (data) {
                        $('#collectBtn').removeClass("fa-star-o").addClass("fa-star");
                    }else{
                        $('#collectBtn').removeClass("fa-star").addClass("fa-star-o");
                    }
                })
            }
            // ================游记点赞=========================
            // 用于开发游记点赞
            //查询点赞该攻略的数量
            $.get(baseUrl+"/likesAndCollects"+"/travelLikeNum", {travelId: travelId}, function (data) {
                $('#travelLike').html(data);
            })
            // 查询数据库当前用户是否已经对当前游记点赞
            $.get(baseUrl+'/likesAndCollects/travelLikeStatus',{userId: user.id, travelId: travelId}, function (data) {
                $('#likeBtn').data("status", data);
                if (data) {
                    // 1 点赞
                    $('#likeBtn').removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
                } else {
                    // 0 不点赞
                    $('#likeBtn').removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
                }
            });
            $('#likeBtn').click(function () {
                    if ($("#likeBtn").data('status') ==0) {
                        num = $("#travelLike").html();
                        num++;
                        $("#travelLike").html(num);
                        $('#likeBtn').removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up");
                        $("#likeBtn").data('status', 1);
                        // 进行点赞逻辑开发
                        $.ajax({
                            url: baseUrl+"/likesAndCollects"+"/travelLike",
                            type: 'post',
                            data: {userId: user.id, travelId: travelId, status: 1},
                            success: function (data) {
                                if (data.success) {
                                    $(document).dialog({
                                        overlayClose: true,
                                        content: '点赞成功'
                                    });
                                }
                            }
                        })
                    } else if ($("#likeBtn").data('status') == 1) {
                        num = $("#travelLike").html();
                        num--;
                        $("#travelLike").html(num);
                        $('#likeBtn').removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up");
                        $("#likeBtn").data('status', 0);
                        $.ajax({
                            url: baseUrl+"/likesAndCollects"+"/deleteTravelLike/"+user.id+"/"+travelId,
                            type: 'DELETE',
                            success: function (data) {
                                $(document).dialog({
                                    overlayClose: true,
                                    content: '取消点赞成功'
                                });
                            }
                        })
                    }
            })


        })

    </script>
    <style>
        .ccc {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
<body style="background: url('/upload/2.bmp')">
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img  class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title">飞到羊城，只为一场最地道的早茶之旅</h6>
        <div class="social-share"></div>
        <small>
            <span render-html="releaseTime">2018-07-11</span>
            <!--浏览 <span> 0</span>-->
            <!--回复 <span> 0</span>-->
        </small>
        <div class="row">
            <div class="col-2 img">
                <img  class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName">喵喵</span>
                    <button class="btn" id="followBtn">关注</button>
                    <br>
                    <span id="travelNum">2 </span>篇游记
                    <span id="funsNum">5 </span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name">广州</span>
            </div>
        </div>
    </div>

    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime">2018-07-11</span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends">120</span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName">和朋友</span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days">1</span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content">
        </div>
    </div>

    <hr>

    <div class="container d-flex">
        &nbsp;&nbsp;&nbsp;
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up"  id="likeBtn" data-status="0">
                <span id="travelLike">0</span>
            </i>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="p-2  flex-fill">
            <i class="fa  fa-commenting-o"  id="commentBtn">
                <span></span>
            </i>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="p-2  flex-fill">
            <i class="fa fa-star-o" data-status="0" id="collectBtn">
                <span id="travelCollect">0</span>
            </i>
        </div>
    </div>
</div>
<hr>
<div class="count d-flex justify-content-between">
    <div class="p-2 commentNum">评论区</div>
</div>
<hr>
<div>
    <div id="comments" class="ccc">
        <div render-loop="list">
            <div>
                <a render-html="list.id" id="SingleComment" display="none" hidden></a>
                <a data-href="/mine/profiles.html" render-attr="data-id=self.id" class="dynamic-detail">
                    <span><img render-src="list.user.headImgUrl" width="20px"></span>
                    <span render-html="list.user.nickName"></span>
                    <span>
                <span render-html="list.createTime"></span>
                </span>
                    <p></p>
                </a>
                <p render-html="list.content"></p>
                <hr>
            </div>
        </div>
    </div>
</div>

<hr>

<!-- 模态框（Modal） -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title" id="myModalLabel" style="margin-left:10px" >
                    评论
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="" method="post" id="editForm">
                    <input type="hidden" name="childId">
                    <div class="form-group" >
                        <!--  <label class="col-sm-4 control-label">分类名称：</label>-->
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="content" >
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-save">发送</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


</body>

</html>